<template>
    <div style="width: 100%; height: 100vh;  overflow: hidden" class="bg">
        <div style=" width: 400px; margin: 150px auto">
            <div style="color: #d0d7f6; font-size: 30px; text-align: center; padding: 30px 0">
                欢迎注册
            </div>
            <el-form ref="form" :model="form" size="large" :rules="rules">

                <el-form-item prop="username">
                    <el-input prefix-icon="set-up" v-model="form.username" placeholder="请输入账号"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="success-filled" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item prop="confirm">
                    <el-input prefix-icon="success-filled" v-model="form.confirm" show-password placeholder="请输入密码"></el-input>
                </el-form-item>

                    <el-button style="width: 100%" type="primary" @click="register">注 册</el-button>


                    <el-button type="text" @click="$router.push('/Login') " style="color: white; ">
                        前往登入 >>
                    </el-button>


            </el-form>



        </div>

    </div>

</template>

<script>
    import request from "../utils/request";

    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: '',
                    password: "",
                    confirm: '',


                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirm: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                    ],
                }
            }
        },

        methods: {
            register() {

                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        if (this.form.password !== this.form.confirm) {
                            this.message.error("两次密码不一致")
                        }
                        request.post("/user/register", this.form).then(res => {
                            if (res.code === '0') {
                                this.$message.success("注册成功");
                                this.$router.push("/login")
                            } else {
                                this.message.error("注册失败")
                            }
                        })
                    }
                })
            },
        }

    }
</script>

<style scoped>
    .bg {
        background-image: url("../assets/bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>
